import React, {Component} from 'react'
import '../../static/scss/common/headComponent.scss'
import commonConfig from '../../static/js/commonConfig'
import {withRouter} from 'react-router'
import {ExportOutlined} from '@ant-design/icons'
import Iconfont from '../../utils/iconfont'
import store from '../../store'

class HeadComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navList: [],
            active: '',
            username: '',
            msgCount: 0,
            messageList: []
        }
        store.subscribe(this.getStoreData)
    }

    componentDidMount() {
        this.setState({
            navList:commonConfig.options.navList
        })
        this.setNavActive();
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.setNavActive();
    }

    getStoreData = () => {
        if (!commonConfig.judgeUserLoginStatus()) {
            this.props.history.push({
                pathname: '/login'
            });
        }
    }
    /*设置导航选中状态*/
    setNavActive = () => {
        let active = commonConfig.getHeadCurrentModule();
        this.setState({active})
    }

    /*导航操作事件*/
    navHandleClick = (item) => {
        const {path} = item;
        this.setState({active: path}, () => {
            commonConfig.redirectPage(this, path);
        });
    }

    /*下拉列表点击*/
    menuHandle = ({key}) => {
        switch (key) {
            case 'basicInfo':
                commonConfig.redirectPage(this, 'personCenter/myBasicInfo');
                break;
            case 'message':
                commonConfig.redirectPage(this, 'personCenter/myMessage');
                break;
            case 'logout':
                commonConfig.logOutService()
                break;
            default:
                break;
        }
    }

    basicInfo = () => {
        commonConfig.redirectPage(this, 'myBasicInfo');
    }

    messageHandle = item => {
        commonConfig.readMessage(item.id, () => {
            commonConfig.redirectPage(this, 'personCenter/myMessage', {id: item.id});
        });
    }

    render() {
        const {noNav, children} = this.props;
        const {navList, active,} = this.state;
        const {realName} = commonConfig.getUserInfo()

        return (
            <>
                <div className="head_container clearFix">
                    <div className="logo_box float-left animate__animated animate__fadeInLeft">
                        <div className="logo_text">
                            <p>{commonConfig.projectName}</p>
                        </div>
                        <p className="name_en">react_template_admin</p>
                    </div>
                    <div className="float-right user_operate animate__animated animate__fadeInRight">

                        <div className="person_center">
                            <div className="user_name">
                                <Iconfont type="icon-yonghu1" onClick={this.basicInfo}/>
                                <span className="name" onClick={this.basicInfo}>{realName}</span>
                                <span className='cut_off_rule'>|</span>
                                <ExportOutlined className='icon_tuichu' onClick={() => commonConfig.logOutService()}/>
                                <span className="name" onClick={() => commonConfig.logOutService()}>退出</span>
                            </div>
                        </div>
                    </div>
                    {noNav ? <>{children}</> :
                        <div className="float-right nav_list animate__animated animate__fadeInDown">
                            <ul>
                                {navList.map((item, i) =>
                                    <li key={i} className={item.path === active ? 'active' : ''}
                                        onClick={this.navHandleClick.bind(this, item)}>
                                        <p>{item.name}</p>
                                    </li>
                                )}
                            </ul>
                        </div>}
                </div>
            </>
        )
    }
}

export default withRouter(HeadComponent);